<template>
	<s-layout title="我的" navbar="custom" tabbar="/pages/index/user"
		:bgStyle="{ backgroundColor:'#f5f5f5',backgroundImage:'https://file.sheepjs.com/storage/decorate/20221115/b530150a466c8cda0a4cd5b29e2c8d11.png'}">
		<view style="padding-top: 40px;">
			<!-- 用户组件：用户卡片 -->
			<s-user-card />

			<!-- 账户余额 -->
			<!-- <view class="item-bg-box wallet-box" @tap="sheep.$router.go('/pages/user/wallet/money')">
				<div class="wallet-title">我的钱包</div>
				<div class="wallet-num-box">
					<div v-if="isLogin" class="wallet-num">{{ fen2yuan(userWallet.balance) || '0.00' }}</div>
					<div v-else class="wallet-num">{{ '--' }}</div>
					<div class="wallet-unit">元</div>
				</div>
			
			</view> -->

			<!-- 用户组件：用户订单 -->
			<view class="item-bg-box">
				<s-order-card />
			</view>

			<!-- 基础组件：宫格导航 -->
			<view class="item-bg-box">
				<s-menu-grid :data="menuData" />
			</view>
		</view>
	</s-layout>
</template>

<script setup>
	import {
		fen2yuan
	} from '../../sheep/hooks/useGoods.js';
	import {
		computed,
		ref
	} from 'vue';
	import sheep from '@/sheep';
	import {
		onShow,
		onPageScroll,
		onPullDownRefresh
	} from '@dcloudio/uni-app';

	// 隐藏原生tabBar
	uni.hideTabBar();

	const userWallet = computed(() => sheep.$store('user').userWallet);

	const template = computed(() => sheep.$store('app').template.user);

	// 是否登录
	const isLogin = computed(() => sheep.$store('user').isLogin);

	const menuData = ref({
		"column": 4,
		"list": [{
				"iconUrl": "/static/images/user/setting.png",
				"title": "设置",
				"titleColor": "#333",
				"subtitle": "",
				"subtitleColor": "#bbb",
				"badge": {
					"show": false,
					"textColor": "#fff",
					"bgColor": "#FF6000"
				},
				"url": "/pages/public/setting"
			},
			// {
			// 	"iconUrl": "/static/images/user/shoucang.png",
			// 	"title": "收藏",
			// 	"titleColor": "#333",
			// 	"subtitle": "",
			// 	"subtitleColor": "#bbb",
			// 	"badge": {
			// 		"show": false,
			// 		"textColor": "#fff",
			// 		"bgColor": "#FF6000"
			// 	},
			// 	"url": "/pages/user/goods-collect"
			// },
			// {
			// 	"iconUrl": "/static/images/user/zuji.png",
			// 	"title": "浏览足迹",
			// 	"titleColor": "#333",
			// 	"subtitle": "",
			// 	"subtitleColor": "#bbb",
			// 	"badge": {
			// 		"show": false,
			// 		"textColor": "#fff",
			// 		"bgColor": "#FF6000"
			// 	},
			// 	"url": "/pages/user/goods-log"
			// },
			{
				"iconUrl": "/static/images/user/fenxiao.png",
				"title": "分销中心",
				"titleColor": "#333",
				"subtitle": "",
				"subtitleColor": "#bbb",
				"badge": {
					"show": false,
					"textColor": "#fff",
					"bgColor": "#FF6000"
				},
				"url": "/pages/commission/index"
			},

			{
				"iconUrl": "/static/images/user/wenti.png",
				"title": "常见问题",
				"titleColor": "#333",
				"subtitle": "",
				"subtitleColor": "#bbb",
				"badge": {
					"show": false,
					"textColor": "#fff",
					"bgColor": "#FF6000"
				},
				"url": "/pages/public/richtext?title=常见问题"
			},
			{
				"iconUrl": "/static/images/user/guanyuwomen.png",
				"title": "关于我们",
				"titleColor": "#333",
				"subtitle": "",
				"subtitleColor": "#bbb",
				"badge": {
					"show": false,
					"textColor": "#fff",
					"bgColor": "#FF6000"
				},
				"url": "/pages/public/richtext?title=关于我们"
			},
			{
				"iconUrl": "/static/images/user/yinsixieyi.png",
				"title": "隐私协议",
				"titleColor": "#333",
				"subtitle": "",
				"subtitleColor": "#bbb",
				"badge": {
					"show": false,
					"textColor": "#fff",
					"bgColor": "#FF6000"
				},
				"url": "/pages/public/richtext?title=隐私协议"
			},
			{
				"iconUrl": "/static/images/user/shouhuodizhi.png",
				"title": "收货地址",
				"titleColor": "#333",
				"subtitle": "",
				"subtitleColor": "#bbb",
				"badge": {
					"show": false,
					"textColor": "#fff",
					"bgColor": "#FF6000"
				},
				"url": "/pages/user/address/list"
			},
			{
				"iconUrl": "/static/images/user/kefu.png",
				"title": "联系客服",
				"titleColor": "#333",
				"subtitle": "",
				"subtitleColor": "#bbb",
				"badge": {
					"show": false,
					"textColor": "#fff",
					"bgColor": "#FF6000"
				},
				"url": "/pages/chat/index"
			}
		],
	});

	onShow(() => {
		sheep.$store('user').updateUserData();
	});

	onPullDownRefresh(() => {
		sheep.$store('user').updateUserData();
		setTimeout(function() {
			uni.stopPullDownRefresh();
		}, 800);
	});
</script>

<style lang="scss" scoped>
	.item-bg-box {
		margin: 10px;
		padding: 10px;
		background-color: #fff;
		border-radius: 10px;
	}

	.wallet-box {
		display: flex;
		justify-content: space-between;
		align-items: center;

		.wallet-title {}

		.wallet-num-box {
			display: flex;
			align-items: flex-end;

			.wallet-num {
				font-size: 30px;
				color: #ff3000;
				font-weight: bolder;
			}

			.wallet-unit {
				padding-left: 5px;
			}
		}


	}
</style>